<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EChharts</title>
</head>
<body>
<div id="main" style="height: 400px; "></div>
<script src="http://www.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
    require.config({
        paths: {
            echarts: 'http://www.baidu.com/build/dist'
        }
    });
    require(
            [
                'echarts',
                'echarts/chart/line',// 使用柱状图就加载line模块，按需加载
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));

                var option = {
                    /* timeline:{
                     data:[
                     '2002-01-01','2003-01-01','2004-01-01','2005-01-01','2006-01-01',
                     '2007-01-01','2008-01-01','2009-01-01','2010-01-01','2011-01-01'
                     ],
                     label : {
                     formatter : function(s) {
                     return s.slice(0, 4);
                     }
                     },
                     autoPlay : false,
                     playInterval : 1000
                     },*/
                    tooltip : {
                        trigger: 'axis',
                        axisPointer:{
                            show: true,
                            type : 'cross',
                            lineStyle: {
                                type : 'dashed',
                                width : 1
                            }
                        },
                        formatter : function (params) {
                            return params.seriesName + ' : [ '
                                    + params.value[0] + ', '
                                    + params.value[1] + ' ]';
                        }
                    },
                    legend: {
                        orient: 'horizontal', // 'vertical'
                        x: 'right', // 'center' | 'left' | {number},
                        y: 'top', // 'center' | 'bottom' | {number}
                        backgroundColor: '#eee',
                        borderColor: 'rgba(178,34,34,0.8)',
                        borderWidth: 4,
                        padding: 10,    // [5, 10, 15, 20]
                        itemGap: 20,
                        textStyle: {color: 'red'},
                        selected: {
                            '降水量' : false
                        },
                        data: [
                            '蒸发量', '降水量','最高气温', '最低气温'
                        ]
                    },
                    xAxis :{
                        data : ['周一','周二','周三','周四','周五','周六','周日']
                    },
                    yAxis : [
                        {
                            type : 'value',
                            axisLabel : {
                                formatter: '{value} ml'
                            }
                        },
                        {
                            type : 'value',
                            axisLabel : {
                                formatter: '{value} °C'
                            },
                            splitLine : {show : false}
                        }
                    ],
                    series : [
                        {
                            name:'蒸发量',
                            type:'bar',
                            'markLine':{
                                symbol : ['arrow'],
                                symbolSize : [4, 2],
                                itemStyle : {
                                    normal: {
                                        lineStyle: {color:'orange'},
                                        barBorderColor:'orange',
                                        label:{
                                            position:'left',
                                            formatter:function(params){
                                                return Math.round(params.value);
                                            },
                                            textStyle:{color:'orange'}
                                        }
                                    }
                                },
                                'data':[{'type':'min','name':'平均值'}]
                            },
                            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
                        },
                        {
                            name:'最高气温',
                            type:'line',
                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            yAxisIndex: 1,
                            data:[11, 11, 15, 13, 12, 13, 10]
                        },
                        {
                            name:'降水量',
                            type:'bar',
                            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6]
                        }
                    ]
                };
// 动态添加默认不显示的数据
                var ecConfig = require('echarts/config');
                myChart.on(ecConfig.EVENT.LEGEND_SELECTED, function (param){
                    var selected = param.selected;
                    var len;
                    var added;
                    if (selected['最低气温']) {
                        len = option.series.length;
                        added = false;
                        while (len--) {
                            if (option.series[len].name == '最低气温') {
                                // 已经添加
                                added = true;
                                break;
                            }
                        }
                        if (!added) {
                            myChart.showLoading({
                                text : '数据获取中',
                                effect: 'whirling'
                            });
                            setTimeout(function (){
                                option.series.push({
                                    name:'最低气温',
                                    type:'line',
                                    yAxisIndex: 1,
                                    data:[-2, 1, 2, 5, 3, 2, 0]
                                });
                                myChart.hideLoading();
                                myChart.setOption(option);
                            }, 1000)
                        }
                    }
                });
                // 为echarts对象加载数据
                myChart.setOption(option);


            }
    )
</script>
</body>
</html>